﻿<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset=utf-8 /> 
<meta name="viewport" content="width=620" /> 
<title>HTML5 Demo: Web SQL Database - rollback test</title> 
<link rel="stylesheet" href="/css/html5demos.css" type="text/css" /> 
<script src="/js/h5utils.js"></script></head> 
<body> 
<script> 
	var price = new Array();
	




window.onload = function(){
var db = openDatabase('price', '1.0', 'pricedemo', 2 * 1024);
if(!db) alert("Failed to connect to database.");
db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS pricedata (id unique, price)');  
  /*
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (1, 2503)');
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (2, 2549)');
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (3, 2580)');
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (4, 2577)');
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (5, 2555)');
    tx.executeSql('INSERT INTO pricedata(id, price) VALUES (6, 2440)');        
  */
    tx.executeSql("SELECT * FROM pricedata", [], 
            function(tx, results)
            {var len = results.rows.length, i;  
            alert(len); 
            for (i = 0; i < len; i++) 
            {price[i] = results.rows.item(i).price; 
            alert(price[i]);
            }
            drawprice();
            },
        function(tx, error){alert("query data error");});
});
};

function drawprice()
{
	var elem = document.createElement("canvas");
	elem.width = 500;
	elem.height = 500;
	document.body.appendChild( elem );
	
	var context = elem.getContext("2d");
			
	var price_num = price.length;
	var price_max = price[0];
	var price_min = price[0];

	

	//alert(price_num);
	
	for(var x = 0; x < price_num; x++)
	{
		if(price[x] > price_max)	price_max = price[x];
		if(price[x] < price_min)  price_min = price[x];
	}
	

	
	var price_region = price_max - price_min;
	price_max += price_region/10;
	price_min -= price_region/10;
	price_region += price_region/5;
	
	var point_x = new Array();
	var point_y = new Array();
		
	context.beginPath();		
	for(var i = 0; i < price_num; i++)
	{
		point_x[i] = (i/price_num)*elem.width;
		point_y[i] = (1 - ((price[i] - price_min)/price_region))*elem.height;
		
		//context.arc(point_x[i], point_y[i], 10, 0, Math.PI, true);
		context.fillRect(point_x[i], point_y[i], 10, 10);

		if(i == 0)
			context.moveTo(point_x[i]+5, point_y[i]+5);
		else
			context.lineTo(point_x[i]+5, point_y[i]+5);
	}
	context.stroke();
	
};

</script> 


</body> 
</html> 